Product card settings - No variant UI

The theme settings for Product cards are essential for customizing the appearance and functionality of product cards across the shop. These settings allow you to adjust the style, imagery, text alignment, and interactive elements like buttons and hover effects, providing a cohesive and branded shopping experience.

Key settings include options for Product card style, which lets you choose between banner, no image, no padding, or padding styles. The Image style setting offers single image or slideshow options, while the Image aspect ratio allows for default, landscape, portrait, square, widescreen, or ultrawide formats. Button styles can be customized to hide, show icon only, text only, or text with icon.

Text display and alignment settings enable you to control the visibility and positioning of text on product cards. Additional features include collection badges, price display, quick-add buttons, and vendor display options. Hover media settings enhance interactivity by specifying media shown on hover, and slideshow settings allow for column count adjustments, animation styles, autoplay, and navigation controls.

Usage examples highlight how these settings can be used to create a unique look for product cards, enhance user interaction with quick-add buttons and hover media, and optimize display across devices by adjusting column counts for desktop and mobile.

Overview

The theme settings for Product cards are designed to control the overall look and feel of product cards across the shop. These settings are applied globally but can be overridden at the section or block level. They allow for customization of product card appearance, including style, imagery, text alignment, and interactive elements like buttons and hover effects.

Key components and functionality

Product card style

This setting determines the overall style of the product cards, offering several options to customize their appearance:

• Banner: Displays the product card with a banner style.
• No image: Removes the image from the product card.
• No padding: Eliminates padding around the product card.
• Padding: Adds padding around the product card. Default: Padding

Image style

This setting controls how images are displayed on product cards, with options for different presentation styles:

• Single image: Displays a single image on the product card. Default: Image
• Slideshow: Allows multiple images to be shown in a slideshow format.

Image aspect ratio

This setting adjusts the aspect ratio of images on product cards, providing flexibility in how images are displayed:

• Default: Uses the default aspect ratio.
• Landscape: Sets the image to a landscape orientation.
• Portrait: Sets the image to a portrait orientation.
• Square: Displays the image in a square format. Default: Square
• Widescreen: Uses a widescreen aspect ratio.
• Ultrawide: Uses an ultrawide aspect ratio.

Button style

This setting defines the style of buttons on product cards, affecting how users interact with the cards:

• Hide: No button is displayed.
• Icon only: Displays only an icon on the button.
• Text only: Displays only text on the button.
• Text with icon: Combines text and an icon on the button. Default: Text with icon

Text display

This setting controls the text content shown on product cards:

• Title and excerpt: Displays both the title and a short excerpt. Default: Title and excerpt
• Excerpt only: Shows only the excerpt.
• Title only: Shows only the title.
• No text: Hides all text.

Text alignment

This setting allows customization of text alignment on product cards:

• Horizontal alignment: Aligns text to the left, center, or right. Default: Left
• Vertical alignment: Aligns text to the top, center, or bottom. Default: Bottom

Collection badges

This setting allows for the display of collection badges on product cards, providing additional context or promotional information.

Price display

This checkbox setting determines whether the product price is shown on the card. Default: True

Quick-add button

This checkbox setting enables a quick-add button on product cards, allowing users to add items to their cart directly from the card. Default: True

Vendor display

This checkbox setting controls whether the vendor's name is displayed on the product card.

Hover media

This setting specifies the media displayed when a product card is hovered over:

• None: No hover media is shown. Default: None
• Last item: Displays the last item in the media list.
• Second item: Shows the second item.
• Second-to-last item: Shows the second-to-last item.
• Use metafield: Uses a metafield for hover media.

Slideshow settings

These settings apply when the image style is set to "Slideshow":

• Column count (desktop/mobile): Adjusts the number of columns in the slideshow for desktop and mobile. Default: 1
• Animation style: Chooses between default and fade animation styles. Default: Default
• Autoplay delay: Sets the delay for autoplay in seconds. Default: 4s
• Animation speed: Controls the speed of the animation in seconds. Default: 0.8s
• Autoplay slideshow: Enables or disables autoplay. Default: False
• Show navigation: Displays navigation controls. Default: True
• Show pagination: Displays pagination controls.

Pagination style

This setting defines the style of pagination for slideshows:

• Dynamic: Uses a dynamic pagination style.
• Fraction: Displays pagination as a fraction.
• Progress bar: Shows a progress bar for pagination.
• Scrollbar: Uses a scrollbar for pagination.

Usage examples

1. Customizing product card appearance: Use the Product card style and Image aspect ratio settings to create a unique look for your product cards that aligns with your brand's aesthetic.

2. Enhancing user interaction: Enable the Quick-add button and Hover media settings to provide a more interactive shopping experience, allowing users to quickly add products to their cart and view additional media on hover.

3. Optimizing for different devices: Adjust the Column count settings for desktop and mobile to ensure your product cards display optimally across all devices, maintaining a consistent and user-friendly layout.